<template>
  <el-dialog
      :visible.sync="isVisible"
      width="500px"
      center
      @close="closeDialog">
    <div class="cropper-box">
      <vue-cropper
        ref="cropper"
        :img="img"
        :outputSize="option.size"
        :outputType="option.outputType"
        :info="true"
        :full="option.full"
        :canMove="option.canMove"
        :canMoveBox="option.canMoveBox"
        :original="option.original"
        :autoCrop="option.autoCrop"
        :fixed="option.fixed"
        :fixedNumber="option.fixedNumber"
        :centerBox="option.centerBox"
        :infoTrue="option.infoTrue"
        :fixedBox="option.fixedBox"
        @realTime="realTime">
      </vue-cropper>
    </div>
    <div class="options-box">
      <div :style="previews.div" class="previews-box">
        <el-image icon="el-icon-user-solid" :src="previews.url" :style="previews.img"/>
      </div>
      <el-button type="primary" @click.native="finish">确定</el-button>
    </div>
   </el-dialog>
</template>

<script>
  import VueCropper from 'vue-cropper'
    export default {
      components: {
        VueCropper
      },
      props: {
        isVisible: {
          type: Boolean,
          default: false,
        },
        img: {
          type: String,
          default: ''
        }
      },
      data() {
        return {
          option: {
            // img: '', // 裁剪图片的地址
            info: true, // 裁剪框的大小信息
            outputSize: 0.8, // 裁剪生成图片的质量
            outputType: 'png', // 裁剪生成图片的格式
            canScale: false, // 图片是否允许滚轮缩放
            autoCrop: true, // 是否默认生成截图框
            autoCropWidth: 100, // 默认生成截图框宽度
            autoCropHeight: 100, // 默认生成截图框高度
            fixedBox: true, // 固定截图框大小 不允许改变
            fixed: true, // 是否开启截图框宽高固定比例
            fixedNumber: [1, 1], // 截图框的宽高比例
            full: true, // 是否输出原图比例的截图
            canMove: true, // 上传图片能否移动
            canMoveBox: true, // 截图框能否拖动
            original: false, // 上传图片按照原始比例渲染
            centerBox: true, // 截图框是否被限制在图片里面
            infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
          },
          previews: ''
        }
      },
      methods: {
        // 点击裁剪，这一步是可以拿到处理后的地址
        finish() {
          this.$refs['cropper'].getCropData((data) => {
            this.$emit('get', data);
          })
          this.isVisible = false;
        },
        //浏览
        realTime(data) {
          this.previews = {...data}
        },
        //关闭回调
        closeDialog() {
          this.img = '';
          this.$emit('close');
        }
      }
    }
</script>

<style lang="scss" scoped>
  .cropper-box {
    width: 280px;
    height: 280px;
    float: left;
    margin-right: 30px;
  }
  .options-box {
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .previews-box {
      overflow:hidden;
      border-radius:100%;
      border: 3px #ccc solid;
      zoom:0.55;
    }
  }
</style>
